<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 		<title>邮件群发</title>
 		<style type="text/css">
		*{margin: 0;padding: 0;}
		html,body{height:100%;}

		body{
			background: url(img/bg.jpg) no-repeat;
			background-size:cover; 
		}

		.main{
			width:700px;	 
			position:absolute;
			top:50%;
			left:50%;
			margin-left: -350px;
			margin-top: -200px;
			border-radius:5px;
			box-shadow: 2px 2px 5px #ccc; 
		}
		.main .head{
				font-size:18px;
				line-height:40px;
				height:40px;
				background:rgba(0,0,0,0.3s);
				border-radius:5px;
				color:#fff;
				text-indent: 20px;
		}
		.main span{
			display: inline-block;
			width: 100px;
			vertical-align:center;
			text-indent:20px;
		}
		.main input{
			width:200px; 
			height:30px;
			margin:5px 0;
		}
		.main button{
			width:100px;
			margin-left:500px;
			margin-top:20px;
			margin-bottom:20px; 
			cursor:pointer;
			border:none;
			border-radius:5px;
			height: 30px;
			background: #5A5046;
			color:#fff;
		}

		.email{ background: #fff; border-radius: 5px;}
 		</style>
</head>
 <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
   <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>

<body>
		<div class='main'>
				<h1 class='head'>邮件发送技术</h1>
				<div class='email'> 
				<form action="index.php" method="post">
				  <p><span>收&nbsp;&nbsp;件&nbsp;人：</span><input type="text" name="to" placeholder="多个收件人请用;隔开"></p>
				  <P><span>邮件主题：</span><input type="text" name="subject" placeholder="请输入主题"></P>
				  <p><span>邮件内容：</span><textarea name='content' id="editor" style="width:500px;margin-left:100px;"></textarea></p>
				  <button type="submit">发送邮件</button>
				</form>
				</div>	
		</div>
</body>

<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');

    </script>
</html>